<template>
  <div class="dashboard">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="6" class="chart-container">
        <div class="center-img">
          <span>健康档案</span>
          <img :src="imageSrc" alt="注意图标" style="width: 30px;height: 30px;"/>
        </div>
        <div style="display: flex; justify-content: space-between;" class="chart-item">
          <div style="width: 48%; position: relative;">
            <div id="main1" style="width: 100%; height: 200px;"></div>
            <div class="chart-label">建档率</div>
          </div>
          <div style="width: 48%; position: relative;">
            <div id="main2" style="width: 100%; height: 200px;"></div>
            <div class="chart-label">档案使用率</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6"class="chart-container">
        <div class="center-img">
          <span>家庭签约</span>
          <img :src="imageSrc" alt="注意图标" style="width: 30px;height: 30px;"/>
        </div>
        <div style="display: flex; justify-content: space-between;" class="chart-item">
          <div style="width: 48%; position: relative;">
            <div id="main3" style="width: 100%; height: 200px;"></div>
            <div class="chart-label">建档率</div>
          </div>
          <div style="width: 48%; position: relative;">
            <div id="main4" style="width: 100%; height: 200px;"></div>
            <div class="chart-label">档案使用率</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="chart-container">
        <div class="center-img">
          <span>履约情况</span>
          <img :src="imageSrc" alt="注意图标" style="width: 30px;height: 30px;"/>
        </div>
        <div style="display: flex; justify-content: space-between;" class="chart-item">
          <div style="width: 48%; position: relative;">
            <div id="main5" style="width: 100%; height: 200px;"></div>
            <div class="chart-label">建档率</div>
          </div>
          <div style="width: 48%; position: relative;">
            <div id="main6" style="width: 100%; height: 200px;"></div>
            <div class="chart-label">档案使用率</div>
          </div>
        </div>
      </el-col>
      <el-col :span="5" class="chart-container">
        <div class="center-img">
          <span>诊疗情况</span>
          <img :src="imageSrc" alt="注意图标" style="width: 30px;height: 30px;"/>
        </div>
        <div style="display: flex; justify-content: space-between;" class="chart-item">

          <div style="width: 30%;position: relative">
            <div class="">
              <div class="center-one">- -</div>
              <div class="center-one">人/次</div>
            </div>
          </div>
          <div style="width: 48%;position: relative">
            <div class="chart-item">
              <div id="main7" style="width: 100%; height: 200px;"></div>
              <div class="chart-label">重点人群签约率</div>
            </div>
          </div>

        </div>

      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="7" class="chart-container">
        <div class="center-img">
          <img :src="paiming" alt="注意图标" style="width: 30px;height: 30px;"/>
          <span>建档率排名</span>
          <img :src="imageSrc" alt="注意图标" style="width: 30px;height: 30px;"/>
        </div>
        <div style="display: flex; justify-content: center;" class="chart-item">
          <div style="width: 100%; position: relative;">
            <div id="main8" style="width: 100%; height: 250px;"></div>
            <div class="chart-label">世界人口分布</div>
          </div>
        </div>
      </el-col>
      <el-col :span="9"class="chart-container">
        <div>签约率排名</div>
        <div style="display: flex; justify-content: space-between;" class="chart-item">
          <div style="width: 48%; position: relative;">
            <div id="main3" style="width: 100%; height: 200px;"></div>
            <div class="chart-label">建档率</div>
          </div>
          <div style="width: 48%; position: relative;">
            <div id="main4" style="width: 100%; height: 200px;"></div>
            <div class="chart-label">档案使用率</div>
          </div>
        </div>
      </el-col>
      <el-col :span="7" class="chart-container">
        <div>诊疗人次排名</div>
        <div style="display: flex; justify-content: space-between;" class="chart-item">
          <div style="width: 48%; position: relative;">
            <div id="main5" style="width: 100%; height: 200px;"></div>
            <div class="chart-label">建档率</div>
          </div>
          <div style="width: 48%; position: relative;">
            <div id="main6" style="width: 100%; height: 200px;"></div>
            <div class="chart-label">档案使用率</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="11" class="chart-container" style="margin-right: 5px">
        <div class="center-img">
          <span>近一年新增建档、新增签约数</span>
          <img :src="imageSrc" alt="注意图标" style="width: 30px;height: 30px;"/>
        </div>
        <div style="width: 100%; position: relative; margin-top: 10px;">
          <div id="main10" style="width: 100%; height: 200px;"></div>
        </div>
      </el-col>
      <el-col :span="12"class="chart-container">
        <div class="center-img">
          <span>近一年就诊（门诊、住院）人次</span>
          <img :src="imageSrc" alt="注意图标" style="width: 30px;height: 30px;"/>
        </div>
        <div style="width: 100%; position: relative; margin-top: 10px;">
          <div id="main11" style="width: 100%; height: 200px;"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import zhuyiImage from '@/assets/images/img/zhuyi.png';
import PaiMing from '@/assets/images/img/paiming.png';

export default {
  name: 'workbench',
  data() {
    return {
      imageSrc: zhuyiImage,
      paiming: PaiMing,
      chart: null,
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null,
      chart6: null,
      chart7: null,
      chart8: null,
      chart9: null,
      chart10: null,
      chart11: null,
      // 定义具体数据...
      data1: [
        { value: 30, name: '已建档' },
        { value: 70, name: '未建档' }
      ],
      data2: [
        { value: 76.77, name: '已使用' },
        { value: 23.23, name: '未使用' }
      ],
      data3: [
        { value: 10, name: '已签约' },
        { value: 90, name: '未签约' }
      ],
      data4: [
        { value: 60, name: '已签约' },
        { value: 40, name: '未签约' }
      ],
      data5: [
        { value: 73.62, name: '已履约' },
        { value:  28.8, name: '未履约' }
      ],
      data6: [
        { value: 71.2, name: '已履约' },
        { value: 28.8, name: '未履约' }
      ],
      data7: [
        { value: 0, name: '住院' },
        { value: 0, name: '门诊' }
      ],
      data8: [
        { value: 18203, name: 'Brazil' },
        { value: 23489, name: 'Indonesia' },
        { value: 29034, name: 'USA' },
        { value: 104970, name: 'India' },
        { value: 131744, name: 'China' },
        { value: 630230, name: 'World' }
      ],
      data9: [
        { value: 100, name: '建档率' },
        { value: 0, name: '档案使用率' }
      ],
      data10: [
        { value: 100, name: '签约率' },
        { value: 0, name: '重点人群签约率' }
      ],
      data11: [
        { date: 'Mon', outpatient: 140, inpatient: 120 },
        { date: 'Tue', outpatient: 232, inpatient: 282 }
      ]
    };
  },
  mounted() {
    this.initChart('main1', this.chart1, this.getOption(this.data1));
    this.initChart('main2', this.chart2, this.getOption1(this.data2));
    this.initChart('main3', this.chart3, this.getOption(this.data3));
    this.initChart('main4', this.chart4, this.getOption1(this.data4));
    this.initChart('main5', this.chart5, this.getOption(this.data5));
    this.initChart('main6', this.chart6, this.getOption1(this.data6));
    this.initChart('main7', this.chart7, this.getOption1(this.data7));
    this.initChart('main8', this.chart8, this.getWorldPopulationOption());
    this.initChart('main9', this.chart9, this.getOption(this.data9));
    this.initChart('main10', this.chart10, this.getMain11Option(this.data10));
    this.initChart('main11', this.chart11, this.getMain11Option(this.data11));
  },
  methods: {
    initChart(id, chartInstance, option) {
      if (chartInstance) {
        chartInstance.dispose();
      }
      const chartDom = document.getElementById(id);
      if (chartDom) {
        chartInstance = echarts.init(chartDom);
        chartInstance.setOption(option);
        this[id] = chartInstance;
      }
    },
    getOption(data) {
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false // 隐藏图例以节省空间
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
    },
    getOption1(data) {
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false // 隐藏图例以节省空间
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '70%',
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
    },
    getWorldPopulationOption() {
      return {
        // title: {
        //   text: 'World Population'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6']
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          },
          {
            name: '2012',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
        ]
      };
    },
    getMain11Option(data) {
      return {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: 'rgb(128, 255, 165)'},
                {offset: 1, color: 'rgb(1, 191, 236)'}
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
            name: 'Line 2',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: 'rgb(0, 221, 255)'},
                {offset: 1, color: 'rgb(77, 119, 255)'}
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
          }
        ]
      };
    }
  },
  beforeDestroy() {
    if (this.chart1) { this.chart1.dispose(); }
    if (this.chart2) { this.chart2.dispose(); }
    if (this.chart3) { this.chart3.dispose(); }
    if (this.chart4) { this.chart4.dispose(); }
    if (this.chart5) { this.chart5.dispose(); }
    if (this.chart6) { this.chart6.dispose(); }
    if (this.chart7) { this.chart7.dispose(); }
    if (this.chart8) { this.chart8.dispose(); }
    if (this.chart9) { this.chart9.dispose(); }
    if (this.chart10) { this.chart10.dispose(); }
    if (this.chart11) { this.chart11.dispose(); }
  }
}
</script>
<style scoped>
.center-img{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  margin-top: 5px;
  font-size: 16px;
}

.center-one {
  /*border: #e5e6e7 1px solid;*/
  font-size: 18px;
  margin: 20px;
  /*font-weight: bold;*/
  color: #5a5e66;
}



.dashboard {
  padding: 20px;
  background-color: #f9fafc;
}

.el-row {
  margin-bottom: 20px;
&:last-child {
   margin-bottom: 0;
 }
}

.chart-container {

  padding: 10px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.chart-item {
  position: relative;
  text-align: center;
}

.chart-label {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}

/* 确保在小屏幕上图表容器宽度调整 */
@media screen and (max-width: 768px) {
  .el-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .el-row + .el-row {
    margin-top: 20px;
  }
}
</style>
